<template>
  <div>
    <el-form :inline="true">
        <el-form-item>
            <el-button type="primary" @click="formDig = true">新增字典类型</el-button>
        </el-form-item>
  </el-form>
    <el-table
      :data="dictType"
      style="width: 100%">
      <el-table-column
        prop="code"
        label="数据字典编码"
        width="200">
      </el-table-column>
      <el-table-column
        prop="name"
        label="数据类型名称"
        width="200">
      </el-table-column>
      <el-table-column
        prop="description"
        label="数据类型描述"
        width="350">
      </el-table-column>
      <el-table-column
					prop="icon"
					label="操作">

				<template slot-scope="scope">
					<el-button type="text" @click="editHandle(scope.row.code)">编辑</el-button>
					<el-divider direction="vertical"></el-divider>

					<template>
						<el-popconfirm title="这是一段内容确定删除吗？" @confirm="delHandle(scope.row.code)">
							<el-button type="text" slot="reference">删除</el-button>
						</el-popconfirm>
					</template>

				</template>
			</el-table-column>
    </el-table>

    <el-dialog
				title="提示"
				:visible.sync="formDig"
				width="600px"
				:before-close="handleClose">

			<el-form :model="editForm" :rules="editFormRules" ref="editForm" label-width="100px" class="demo-editForm">
        <div style="margin-bottom:10px">如果出现已存在的数据字典编码，则进行编辑，否则进行增加</div>
				<el-form-item label="数据字典编码" prop="code" label-width="150px">
					<el-input v-model="editForm.code" autocomplete="off"></el-input>
				</el-form-item>

				<el-form-item label="数据类型名称" prop="name" label-width="150px">
					<el-input v-model="editForm.name" autocomplete="off"></el-input>
				</el-form-item>

				<el-form-item label="数据类型描述" prop="description" label-width="150px">
					<el-input v-model="editForm.description" autocomplete="off"></el-input>
        </el-form-item>

				<el-form-item class="add">
          <el-button v-if="editForm.code==undefined" type="primary" @click="submitForm('editForm')">创建</el-button>
          <el-button v-else type="primary" @click="submitForm('editForm')">更新</el-button>
				</el-form-item>
			</el-form>

		</el-dialog>
  </div>
</template>

<script>
export default {
  name: 'Dict',
  data() {
    return {
      dictType: [],
      formDig: false,
      editForm:{},
      editFormRules: {
					name: [
						{required: true, message: '请输入数据类型名称', trigger: 'blur'}
					],
					code: [
						{required: true, message: '请输入数据类型编码', trigger: 'blur'}
					],
          description: [
            {require: true , message:'请输入数据类型描述' , trigger:'blur'}
          ]
				},
    }
  },
  created(){
    this.getDict();
  },
  methods:{
    getDict(){
      this.$axios.get("/sys/dict/list").then(res =>{
          this.dictType = res.data.data;
      })
    },
    delHandle(id) {

      var ids = []

      if (id) {
        ids.push(id)
      } else {
        this.multipleSelection.forEach(row => {
          ids.push(row.id)
        })
      }

      console.log(ids)

      this.$axios.post("/sys/dict/delete", ids).then(res => {
        this.$message({
          showClose: true,
          message: '恭喜你，操作成功',
          type: 'success',
          onClose:() => {
            this.getDict()
          }
        });
        this.getDict();
      })
    },
    handleClose(){
      this.resetForm('editForm')
    },
    resetForm(formName) {
				this.$refs[formName].resetFields();
				this.formDig = false
				this.editForm = {}
			},
      editHandle(code){
        this.$axios.get('/sys/dict/info/'+code).then(res =>{
          this.editForm  = res.data.data
          this.formDig = true
        })
      },
      submitForm(){
     this.$axios.post("/sys/dict/save",this.editForm).then(res =>{
       this.$message({
          showClose: true,
          message: '恭喜你，操作成功',
          type: 'success',
          onClose:() => {
            this.getDict(); 
            this.resetForm('editForm')
          }
       })
        this.getDict();
       this.formDig = false
     })
  }
  },
}
</script>

<style scoped>
  .add{
    margin-left: 50%;
    transform: translateX(-50%);
  }
  .cell{
	text-align: center;
 }
 .el-table {
  font-size: 18px;
}
</style>